
<template>
  <div class="nav-container" :class="{'verticalMenu':menuMode=='vertical'?true:false}">
    
<el-menu
      :mode="menuMode"
      :default-active="activeIndex"
      :ellipsis="false"
      :collapse="isCollapse"
      class="el-menu-demo"
      @select="handleSelect"
    >
      <!-- <el-menu-item index="1">测试1</el-menu-item>
      <el-menu-item index="2">测试2</el-menu-item>
      <el-menu-item index="3">测试3</el-menu-item>
      <el-menu-item index="4">测试4</el-menu-item> -->
      <template v-for="(item,idx) in menuList">
        <template v-if="idx==0">
          <el-menu-item index="0">
                <img
                  style="width: 100px"
                  src="@/imgs/element-plus-logo.svg"
                  alt="Element logo"
                />
              </el-menu-item>
        </template>
        <template v-else>
          <el-menu-item :index="idx.toString()">{{item.en_name}}</el-menu-item>
        </template>
        
      </template>
    </el-menu>

    
  </div>
</template>

<script>
export default {
  name: 'TopMenu',
  data() {
    return {
      activeIndex: '0',
      menuMode: 'horizontal',
      isCollapse:true,
      // menuItem:{

      //   "home":"/",
      //   "agentSetting":"/main/agentSetting",
      //   "dataAnalyse":"/main/dataAnalyse",
      //   "aboutUs":"/main/aboutUs",
      //   "memberCenter":"/main/memberCenter"
      // }, 
      menuList:[
        {
          'ch_name':'主页','en_name':'home','path':'/'
        },
        {
          'ch_name':'智能分析体','en_name':'agentSetting','path':'/main/agentSetting'
        },
        {
          'ch_name':'数据分析','en_name':'dataAnalyse','path':'/main/dataAnalyse'
        },
        {
          'ch_name':'关于我们','en_name':'aboutUs','path':'/main/aboutUs'
        },
        {
          'ch_name':'会员中心','en_name':'memberCenter','path':'/main/memberCenter'
        },
      ],
      
      selectMenu:"monitor"
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      let menuItem=this.menuList[key];
      this.activeIndex = key;
      console.log(key+','+keyPath)
      let targetPath=menuItem.path;
      this.$router.push(targetPath);
    },
    checkScreenWidth() {
      //改寫為if模式
      if (window.innerWidth < 900) {
        
        this.menuMode = 'vertical'
      } else {
        
        this.menuMode = 'horizontal'
      }
      
    }
  },
  mounted() {
    this.checkScreenWidth()
    window.addEventListener('resize', this.checkScreenWidth)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkScreenWidth)
  }
}
</script>

<style scoped>
.nav-container{z-index: 100;}
.verticalMenu{width: 150px;float: left;}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu-demo {
  width: 100%;
}

.el-menu--horizontal {
  display: flex;
  justify-content: center;
  height: 90px;
  
}
.nav-container :deep() .el-menu-item{
  font-size: 20px;
  font-weight: bolder;
}
.el-menu--vertical {
  width: 150px;
  min-height: 100vh;
}

.right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: var(--navbar-text);
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      &.theme-switch-wrapper {
        display: flex;
        align-items: center;

        svg {
          transition: transform 0.3s;
          
          &:hover {
            transform: scale(1.15);
          }
        }
      }
    }

    .avatar-container {
      margin-right: 40px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        i {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
</style>
